<!--  -->
<template>
<div class="newsinfo-container">
    <h3 class="title">{{ newsinfo.title}}</h3>
    <p class="subtitle">
        <span>发表时间:{{ newsinfo.create_time }}</span>
        <span>点击:{{ newsinfo.clicked}}</span>
    </p>
    <hr>
    <div class="content">{{ newsinfo.content}}</div>
    <div><comment-box :id="this.id"></comment-box></div>
</div>
</template>

<script>
import { Toast } from "mint-ui";
import comment from '../subcomponents/comment.vue'

export default {
    data() {
        return {
            id: this.$route.params.id,  //每条新闻的id
            newsinfo: []    //获取新闻的数组
        }
    },
    created(){
        this.getNewsinfolist()
    },
    methods: {
        getNewsinfolist() {
            this.axios.post('/v2/news_info', {id: this.id}).then(res=>{
                if(res.data.code == 1){
                    // console.log(res);
                                    
                    this.newsinfo = res.data.data                 
                }else{
                    Toast('获取新闻失败')
                }

            })
        }
    },
    components:{
        'comment-box' : comment
    }
};
</script>
<style lang='scss'>
.newsinfo-container{
    padding: 0 4px;
    .title{
        font-size: 1.25rem;
        text-align: center;
        margin: 15px 0 ;
        color: red;
    }
    .subtitle{
        font-size: 0.85rem;
        color:cornflowerblue;
        display: flex;
        justify-content: space-between;
    }
    .content{
        color: dimgray;
        img{
            width: 100%;
            
        }

    }
}
</style>